<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管网统计</title>
    <!-- 引入echarts.js -->
    <script src="../js/echarts.js"></script>
    <!-- 引入 css 的CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 js 的CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>

    <!-- 引入封装的请求 -->
    <script src="../js/gwtj封装.js"></script>
    <!-- 引入css代码（注意修改路径） -->
    <link rel="stylesheet" href="../font/iconfont.css">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tfD85YZlgokKmLkD4PjZB4lZFxhr4VyK"></script>
    <link rel="stylesheet" href="../css/4.css">

</head>

<body>
    <div class="map">

        <!-- 地图容器 -->
        <div id="container"></div>

        <script>
            var map = new BMapGL.Map("container"); // 创建地图实例 
            var point = new BMapGL.Point(113.823024, 34.79473); // 创建点坐标 
            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.setHeading(64.5); //设置地图旋转角度
            map.setTilt(73); //设置地图的倾斜角度

            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);

            var marker = new BMapGL.Marker(point); // 创建标注   
            map.addOverlay(marker); // 将标注添加到地图中
            map.setMapStyleV2({
                styleId: '4460912dccb85a7bcfcdd055449b0407'
            });
        </script>

    </div>
    <div class="nav1">
        <div class="nav2"><i>排水管网GIS综合应用系统</i></div>
    </div>
    <div class="nav">
        <div class="navbar"><a href="0.html">首页</a>
            <div class="tri"></div>
        </div>
        <!-- 第一个 -->
        <div class="navbar"><a href="2.html">地图操作</a>
            <div class="tri"></div>
        </div>
        <!-- 第二个 -->
        <div class="navbar" , id="query"><a href="3.html">管网查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第三个 -->
        <div class="navbar" id="gwtj"><a href="4.html">管网统计</a>
            <div class="tri"></div>
        </div>
        <!-- 第四个 -->
        <div class="navbar"><a href="5.html">巡检查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第五个 -->
        <div class="navbar navbar1"><a href="6.html">抢修养护</a>
            <div class="tri"></div>
        </div>
        <!-- 第六个 -->
        <div class="navbar"><a href="7.html">图档管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第七个 -->
        <div class="navbar"><a href="8.html">企业管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第八个 -->
        <div class="navbar"><a href="9.html">窨井管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第九个 -->
        <div class="navbar"><a href="10.html">泵站管理</a>
            <div class="tri"></div>
        </div>

        <div class="tubiao">
            <span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing" id="shezhi"></span>
            <span class="iconfont icon-yonghu" id="yonghu">&nbsp;admin</span>
            <span class="iconfont icon-exit-full" id="exit"></span>
        </div>
        <!-- 第十个 -->
    </div>
    <!-- 指南针 -->
    <div class="compass"></div>
    <div class="compass1"></div>
    <div class="tubiaobottom">
        <span class="iconfont icon-sousuo" id="sousuo"></span>
        <span class="iconfont icon-jia" id="jia"></span>
        <span class="iconfont icon-jianhao" id="jiahao"></span>
        <span><img src="../img/images/10010.png" alt=""></span>
        <span class="iconfont icon-fangzi1" id="fangzi"></span>
        <span class="iconfont icon-full-screen" id="jiantou"></span>
    </div>
    <div class="box2">
        <!-- 文字 -->
        <div class="word2">
            <div class="word20">
                <span class="data"><b>259.888</b></span><span class="km">&emsp;KM</span>
                <div class="word21">&emsp;&emsp;管线总长度</div>
            </div>
            <div class="word20">
                <span class="data"><b>16052</b></span><span class="km">&emsp;个</span>
                <div class="word21">&emsp;&emsp;&emsp;设备总数量</div>
            </div>
        </div>
        <div class="page">
            <div class="page1">
                <!-- 表格部分 -->
                <table class="table0" cellspacing="0" cellpadding="5">
                    <tr>
                        <td>序号</td>
                        <td>口径&emsp;&emsp;&emsp;&emsp;</td>
                        <td>设备个数</td>
                    </tr>
                </table>
                <div class="bt">
                    <div class="bt1">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="bt2">导出</div>

                </div>


                <script>
                    //-----------------第一个分页--------------------------------------------------
                    // 封装渲染表格的函数
                    function tabFun(page, gwtj) {
                        var table = document.getElementsByClassName("table0")[0];
                        // 每次渲染都要初始化一下表格，只剩下表头
                        table.innerHTML = `<table class="table" border="1" cellspacing="0" cellpadding="5">
                          <tr>
                            <td>序号</td>
                            <td>口径</td>
                            <td>设备个数</td>
                          </tr>
                        </table>`;
                        // <td>材质</td>
                        // 进行一次判断（三目判断），判断当前页还够不够数据的渲染
                        for (var i = 5 * (page - 1); i < (5 * page <= gwtj.kj.length ? 5 * page : gwtj.kj.length); i++) {
                            table.innerHTML += `<tr>
                                <td>${gwtj.kj[i].id}</td>
                                <td>${gwtj.kj[i].caliber}</td>
                                <td>${gwtj.kj[i].num}</td>
                            </tr>`;
                        }
                        // <td>${gwtj.gwtj-kj[i].material}</td>
                    }

                    ajaxFun("../json/gwtj.json", function(gwtj) {
                        gwtj = JSON.parse(gwtj);
                        console.log(gwtj);
                        // 规定一页展示几条数据 10

                        // 得到总的数据数
                        var num = gwtj.kj.length;
                        console.log(num);
                        // 根据总的数据数得到页数
                        var pageNum = Math.ceil(num / 5);
                        console.log(pageNum);
                        // 获取分页元素
                        var pagination = document.getElementsByClassName("pagination")[0];
                        // 循环渲染
                        for (var i = 1; i <= pageNum; i++) {
                            pagination.innerHTML += `<li class="page-item"><a class="page-link" href="#">${i}</a>`
                        }
                        pagination.innerHTML += `<li class="page-item">
                                  <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                  </a>
                                </li>`;
                        tabFun(1, gwtj);

                        // 获取所有的分页元素
                        var pageItem = document.getElementsByClassName("page-link");
                        // 循环事件绑定（避开了上一页和下一页）
                        for (var j = 1; j < pageItem.length - 1; j++) {
                            pageItem[j].onclick = function() {
                                console.log(this.innerHTML);

                                // 调用渲染的函数，进行数据的渲染
                                tabFun(this.innerHTML, gwtj);
                            }
                        }
                    })
                </script>
            </div>
            <div class="page2">
                <!-- 表格部分 -->
                <table class="table1" cellspacing="0" cellpadding="5">
                    <tr>
                        <td>序号</td>
                        <td>材质</td>
                        <td>设备个数</td>
                    </tr>
                </table>
                <div class="bt">
                    <div class="bt1">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link secondPage" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="bt2">导出</div>
                </div>
                <script>
                    //-----------------第二个分页--------------------------------------------------
                    // 封装渲染表格的函数
                    function tabFun1(page, gwtj) {
                        var table1 = document.getElementsByClassName("table1")[0];
                        // 每次渲染都要初始化一下表格，只剩下表头
                        table1.innerHTML = `<table class="table1" border="1" cellspacing="0" cellpadding="5">
                            <tr>
                                <td>序号</td>
                                <td>材质</td>
                                <td>设备个数</td>
                            </tr>
                            </table>`;
                        // <td>材质</td>
                        // 进行一次判断（三目判断），判断当前页还够不够数据的渲染
                        for (var i = 5 * (page - 1); i < (5 * page <= gwtj.cz.length ? 5 * page : gwtj.cz.length); i++) {
                            table1.innerHTML += `<tr>
                                    <td>${gwtj.cz[i].id}</td>
                                    <td>${gwtj.cz[i].material}</td>
                                    <td>${gwtj.cz[i].num}</td>
                                </tr>`;
                        }
                        // <td>${gwtj.gwtj-kj[i].material}</td>
                    }
                    ajaxFun("../json/gwtj.json", function(gwtj) {
                        gwtj = JSON.parse(gwtj);
                        console.log(gwtj);
                        // 规定一页展示几条数据 10

                        // 得到总的数据数
                        var num1 = gwtj.cz.length;
                        console.log(num1);
                        // 根据总的数据数得到页数
                        var pageNum1 = Math.ceil(num1 / 5);
                        console.log(pageNum1);
                        // 获取分页元素
                        var pagination1 = document.getElementsByClassName("pagination")[1];
                        // 循环渲染
                        for (var i = 1; i <= pageNum1; i++) {
                            pagination1.innerHTML += `<li class="page-item"><a class="page-link secondPage" href="#">${i}</a>`
                        }
                        pagination1.innerHTML += `<li class="page-item">
                                    <a class="page-link secondPage" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                    </li>`;
                        tabFun1(1, gwtj);

                        // 获取所有的分页元素
                        var pageItem1 = document.getElementsByClassName("secondPage");
                        // 循环事件绑定（避开了上一页和下一页）
                        for (var j = 1; j < pageItem1.length - 1; j++) {
                            pageItem1[j].onclick = function() {
                                console.log(this.innerHTML);

                                // 调用渲染的函数，进行数据的渲染
                                tabFun1(this.innerHTML, gwtj);
                            }
                        }

                    })
                </script>

            </div>
        </div>
        <!-- 为图标准备一片空间 -->
        <div id="line"></div>
        <span id="shan1"></span>
        <span id="shan2"></span>
    </div>
    <!-- 指南针 -->
    <div class="compass"></div>
    <div class="compass1"></div>

    <script>
        //自执行函数
        (function() {
            //第一个图表-----------------------------------------------------------------
            var chartDom = document.getElementById('shan1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                //鼠标移入到图表上的提示框
                // tooltip: {
                //     trigger: 'item'
                // },
                //添加图表标题
                title: {
                    text: '按口径统计',
                    left: 'center',
                    top: 0,
                    //调整文本样式
                    textStyle: {
                        color: 'rgb(202,216,223)',
                        fontWeight: '300',
                        fontSize: '12px'
                    }
                },
                //对应提示样式
                legend: {
                    bottom: '5%',
                    left: 'left',
                    orient: 'vertical',
                    textStyle: {
                        color: 'rgb(202,216,223)'
                    }
                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: ['20%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                        value: 300,
                        name: '300'
                    }, {
                        value: 400,
                        name: '400'
                    }, {
                        value: 500,
                        name: '500'
                    }, {
                        value: 200,
                        name: '200'
                    }, {
                        value: 600,
                        name: '600'
                    }, {
                        value: 800,
                        name: '其他'
                    }]
                }]
            };

            option && myChart.setOption(option);
        })();
        (function() {
            //第二个图表-----------------------------------------------------------------
            var chartDom = document.getElementById('shan2');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                //鼠标移入到图表上的提示框
                // tooltip: {
                //     trigger: 'item'
                // },
                //添加图表标题
                title: {
                    text: '按材质统计',
                    left: 'center',
                    top: 0,
                    //调整文本样式
                    textStyle: {
                        color: 'rgb(202,216,223)',
                        fontWeight: '300',
                        fontSize: '12px'
                    }
                },
                //对应提示样式
                legend: {
                    bottom: '5%',
                    left: 'left',
                    orient: 'vertical',
                    textStyle: {
                        color: 'rgb(202,216,223)'
                    }
                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: ['20%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                        value: 500,
                        name: '砼'
                    }, {
                        value: 300,
                        name: 'HDPE'
                    }, {
                        value: 40,
                        name: 'PE'
                    }, {
                        value: 160,
                        name: 'PVC'
                    }, {
                        value: 0,
                        name: '砖'
                    }, {
                        value: 0,
                        name: '钢'
                    }, {
                        value: 0,
                        name: '铸铁'
                    }]
                }]
            };

            option && myChart.setOption(option);
        })();
        (function() {
            //第三个图表-----------------------------------------------------------------
            var chartDom = document.getElementById('line');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '近12月管线变化',
                    top: 20,
                    textStyle: {
                        top: 50,
                        fontWeight: 300,
                        fontSize: '10px',
                        color: 'rgb(202,216,223)'
                    }
                },
                // tooltip: {
                //     trigger: 'none',
                //     axisPointer: {
                //         type: 'cross',
                //         label: {
                //             backgroundColor: '#6a7985'
                //         }
                //     }
                // },
                legend: {
                    data: ['已完成']
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                }],
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: 'true',
                        color: '#fff'
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgb(147,160,169)'
                        }
                    },
                    textStyle: {
                        color: 'red'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgb(27,50,69)",
                            type: "dashed"
                        }
                    }
                },
                series: [{
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 0, 0]
                }]
            };

            option && myChart.setOption(option);
        })();
    </script>
</body>

</html>